<template>
    <el-card class="order-card">
              <template #header>
                  <h3>您的订单</h3>
              </template>
              <el-table :data="orderList" style="width: 100%">
                  <el-table-column prop="id" label="订单ID" width="80" />
                  <el-table-column prop="checkedRoom" label="客房ID" width="80" />
                  <el-table-column prop="amount" label="实付金额" width="120">
                      <template #default="scope">￥{{ scope.row.amount }}</template>
                  </el-table-column>
                  <el-table-column prop="payMethod" label="支付方式" width="120">
                      <template #default="scope">{{ getPayMethod(scope.row.payMethod) }}</template>
                  </el-table-column>
                  <el-table-column prop="status" label="订单状态" width="150">
                      <template #default="scope">{{ getOrderStatus(scope.row.status) }}</template>
                  </el-table-column>
                  <el-table-column prop="scheduledCheckinTime" label="预定的入住时间" width="200" />
                  <el-table-column prop="scheduledCheckoutTime" label="预定的离店时间" width="200" />
              </el-table>
              <el-button @click="gotoAllPersonalOrders">查看全部订单</el-button>
          </el-card>
  </template>
  
  <script setup lang="ts">
  import { ref,onMounted } from 'vue';
  import api from '@/api/index.js';
  import { ElMessage } from 'element-plus';
  import { userStore } from '@/stores/userInfoStore.js';
import router from '@/router';
  
  
  // 接收的订单数据列表
  const orderList = ref([]);
  
  const userStoreInfo = userStore();
  
  const OrdersFormData = ref({
      id: null, // 唯一标识
      userId: userStoreInfo.userInfo.id, // 付款用户id
      userAccountNumber: null, // 付款用户的账号
      checkedRoom: null, // 下单的客房id
      amount: null, // 实付金额
      payMethod: null, // 支付方式（1微信支付，2支付宝支付）
      status: null, // 订单状态（1待支付；2已付款,等待入住；3已取消；4入住中；5已完成；6已退款）
      creteTimeBefore: null, // 预定的入住时间
      creteTimeAfter: null, // 实际入住时间
      updateTimeBefore: null, // 预定的离店时间
      updateTimeAfter: null, // 实际离店时间
  });


  const fetchOrderData = async () => {
      try {
          await api.getOrderInCondition(OrdersFormData.value).then((res) => {
              orderList.value = res.data.data.list || [];
              console.log("订单信息",orderList.value)
          }) 
      }catch(error){
          ElMessage.error('订单信息请求异常')
      }
  }
  
  // 获取支付方式的文字描述
  const getPayMethod = (method) => {
      switch (method) {
          case 1:
              return '微信支付';
          case 2:
              return '支付宝支付';
          default:
              return '未知';
      }
  };
  
  // 获取订单状态的文字描述
  const getOrderStatus = (status) => {
      switch (status) {
          case 1:
              return '待支付';
          case 2:
              return '已付款, 等待入住';
          case 3:
              return '已取消';
          case 4:
              return '入住中';
          case 5:
              return '已完成';
          case 6:
              return '已退款';
          default:
              return '未知';
      }
  };
  
  const gotoAllPersonalOrders= ()=>{
    router.push("/allPersonalOrders")
      
   }


  onMounted(() => {
      fetchOrderData();
  })
  </script>
  
  <style scoped>
  
  </style>